<template>
	<view>
		<scroll-view :scroll-top="goScrollTop" scroll-with-animation="true" scroll-y="true" @scroll="pageScroll">			
			<view class="header_box status_bar">
				<view class="message_box">
					<view class="title">— {{commonData.HeadSloganA}}{{commonData.HeadSloganB}}{{commonData.HeadSloganC}}</view>
					<view class="other_box">
						<view class="other iconfont" data-index="0" @tap="setEwm">&#xe601;</view>
						<view class="other iconfont" data-index="1" @tap="setEwm">&#xe882;</view>
						<view class="other iconfont" data-index="2" @tap="setEwm">&#xe8db;</view>
					</view>
				</view>
				<view class="header">
					<view class="logo" data-url="/pages/index/index" @click="gotopage">
						<image :src="IMG_Api+commonData.logo" mode="widthFix"></image>
					</view>
					<view class="more" @tap="autoListPage" v-if="!pupu">
						<image src="../../static/more.png" mode="widthFix"></image>
					</view>
					<view class="more" @tap="autoListPage" v-if="pupu">
						<image src="../../static/close.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<!-- 二维码弹窗 -->
			<view class="pupu_box" v-if="pupu02" @tap="autoPupu">
				<view class="show_box" @tap.stop="">
					<image :src="IMG_Api+code.wechat" mode="widthFix" v-if="ewmIndex == 0"></image>
					<image :src="IMG_Api+code.qq_code" mode="widthFix" v-if="ewmIndex == 1"></image>
					<image :src="IMG_Api+code.trill" mode="widthFix" v-if="ewmIndex == 2"></image>
				</view>
			</view>
			<view class="nav_pupu" v-if="pupu">
				<view class="nav_box" :class="pupu == false ? 'nav_index' : ''">
					<!-- <view class="close iconfont" @tap="autoListPage">&#xe69f;</view> -->
					<view class="nav_list">
						<view class="list" data-index="0" :data-url="nav[0].url" @tap="selectMenu">
							<view class="name">{{nav[0].text}}</view>
						</view>

						<view class="list" :class="me == true ? 'menuColor' : ''" data-index="1" @tap="selectMenu">
							<view class="name" :class="me == true ? 'menuColor' : ''">{{nav[1].text}}</view>
							<view class="arrow iconfont" v-if="me == false">&#xe6f3;</view>
							<view class="arrow iconfont menuColor" v-if="me == true">&#xf230;</view>
						</view>

						<view class="me_list" v-if="me == true">
							<block v-for="(item, index) in nav[1].junior">
								<view class="me_t" :data-url="item.url" @click="gotopage">{{item.text}}</view>
							</block>
						</view>

						<view class="list" :class="system == true ? 'menuColor' : ''" data-index="2" @tap="selectMenu">
							<view class="name" :class="system == true ? 'menuColor' : ''">{{nav[2].text}}</view>
							<view class="arrow iconfont" v-if="system == false">&#xe6f3;</view>
							<view class="arrow iconfont menuColor" v-if="system == true">&#xf230;</view>
						</view>


						<view class="system_box" v-if="system">
							<view class="system_auto">
								<view class="system_content" v-for="(item, index) in systemData">
									<view class="title">
										<view class="icon iconfont" :class="item.icon"></view>
										<view class="text">{{item.title}}</view>
									</view>
									<view class="value_box">
										<view class="value" v-for="(item02, index02) in item.value"
											:class="item02.color == true ? 'systemColor01' : ''" :data-index01="index"
											:data-index02="index02" :data-url="'/pages/index/system?id='+item02.id"
											@tap="setSystemValue">
											<view class="name" :class="item02.color == true ? 'systemColor02' : ''">
												{{item02.name}}
											</view>
											<view class="text" :class="item02.color == true ? 'systemColor02' : ''">
												{{item02.text}}
											</view>
										</view>
									</view>
								</view>


							</view>
						</view>

						<view class="list" data-index="3" :data-url="nav[3].url" @tap="selectMenu">
							<view class="name">{{nav[3].text}}</view>
						</view>

						<view class="list" data-index="4" :data-url="nav[4].url" @tap="selectMenu">
							<view class="name">{{nav[4].text}}</view>
						</view>

						<view class="list" data-index="5" :data-url="nav[5].url" @tap="selectMenu">
							<view class="name">{{nav[5].text}}</view>
						</view>


					</view>
				</view>
			</view>
			<view class="clear_box"></view>

			<view class="banner_box">
				<swiper :autoplay="true" :interval="3000" :duration="200" indicator-dots="true"
					indicator-color="rgba(255, 255, 255, .5)" indicator-active-color="#0179F1">
					<block v-for="(item, index) in imgdata" :key="index">
						<swiper-item style="height: 100%;" :data-url="item.url" @click="gotopage">
							<view class="swiper-item" style="height: 100%;">
								<image :src="IMG_Api+item.image" mode="scaleToFill"></image>
								<!-- <lys-img-lazy :imgSrc="IMG_Api+item.image" imgMode="scaleToFill"></lys-img-lazy> -->
							</view>
						</swiper-item>
					</block>
				</swiper>
			</view>

			<view class="page_content">
				<view class="with_box">
					<view class="with_img">
						<!-- <image class="img01" :src="IMG_Api+text.index_imageA" mode="widthFix"></image> -->
						<lys-img-lazy :imgSrc="IMG_Api+text.index_imageA" imgMode="widthFix"></lys-img-lazy>
						<image class="img02" src="../../static/bg02.png" mode="widthFix"></image>
						<image class="img03" :class="adm01 ? 'addAnimation01' : ''" :src="IMG_Api+text.index_imageB"
							mode="widthFix"></image>
					</view>
					<view class="with_text">
						<view class="us_box">
							<!-- <view class="us_img">
								<image src="../../static/bg03.png" mode="widthFix"></image>
							</view> -->
							<!-- <view class="line"></view> -->
							<view class="us">{{text.index_phraseA}}</view>
						</view>
						<view class="us_rule">{{text.index_titleA}}<span>{{text.index_titleB}}</span></view>
						<view class="us_introduce">{{text.index_intro}}</view>
						<view class="type_box" v-for="(item, index) in text.index_data" :key="index">
							<view class="icon iconfont icon-dagou"></view>
							<view class="text_box">
								<view class="title">{{item.title}}</view>
								<view class="text">{{item.desc}}</view>
							</view>
						</view>
						<view class="us_menu">
							<view class="menu" :class="adm02 ? 'addAnimation02' : ''" @click="gotopage"
								data-url="/pages/telephone/telephone">
								<view class="text">{{text.index_button}}</view>
								<view class="arrow iconfont">&#xeb08;</view>
							</view>
						</view>
					</view>
				</view>

			</view>

			<view class="satisfaction_box">
				<image :src="IMG_Api+otherConfig.H5bg05" mode="widthFix"></image>
				<view class="satisfaction_content">
					<block v-for="(item, index) in otherConfig.index_info" :key="index">
						<view class="other">
							<view class="num_box">
								<view class="line"></view>
								<view class="num">{{item.title}}</view>
							</view>
							<view class="text">{{item.intro}}</view>
						</view>
					</block>
				</view>
			</view>

			<view class="page_content">
				<view class="page_title">
					<view class="english">{{text.index_Senglishtitle}}</view>
					<view class="content">
						<view class="title">{{text.index_Stitle}}</view>
						<view class="text">{{text.index_Sphrase}}</view>
					</view>
				</view>

				<view class="service_box">
					<view class="service_auto">
						<view class="service" v-for="(item, index) in text.index_Sdata" :key="index">
							<view class="icon">
								<!-- <image :class="adm03 ? 'addAnimation03' : ''" :src="IMG_Api+item.image" mode="widthFix">
								</image> -->
								<lys-img-lazy :class="adm03 ? 'addAnimation03' : ''" :imgSrc="IMG_Api+item.image" imgMode="widthFix"></lys-img-lazy>
							</view>
							<view class="title">{{item.title}}</view>
							<view class="text">{{item.desc}}</view>
							<view class="line"></view>
						</view>

					</view>
				</view>

				<view class="case_title">
					<view class="title">{{text.index_Cphrase}}</view>
					<view class="text">{{text.index_Ctitle}}</view>
					<view class="menu" @click="gotopage" data-url="/pages/case/case">
						<view class="t">查看更多 </view>
						<view class="a">+</view>
					</view>
				</view>


				<view class="case_see">
					<!-- <image :src="IMG_Api+caseStart.map_image" mode="widthFix"></image> -->
					<lys-img-lazy :imgSrc="IMG_Api+caseStart.map_image" imgMode="widthFix"></lys-img-lazy>
					<view class="see_content" :data-url="'/pages/case/details?id='+caseStart.id" @click="gotopage">
						<view class="text_box">
							<view class="tag_box">
								<view class="tag" v-for="(aitem, aindex) in caseStart.tag.split(',')">{{aitem}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="case_name">{{caseStart.name}}</view>
				<view class="case_see">
					<!-- <image :src="IMG_Api+caseSide.map_image" mode="widthFix"></image> -->
					<lys-img-lazy :imgSrc="IMG_Api+caseSide.map_image" imgMode="widthFix"></lys-img-lazy>
					<view class="see_content" :data-url="'/pages/case/details?id='+caseSide.id" @click="gotopage">
						<view class="text_box">
							<view class="tag_box">
								<view class="tag" v-for="(aitem, aindex) in caseSide.tag.split(',')">{{aitem}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="case_name">
					<view class="case_name">{{caseSide.name}}</view>
				</view>
				<block v-for="(item, index) in caseCentre" :key="'caseCentre' + index">
					<view class="case_see">
						<!-- <image :src="IMG_Api+item.map_image" mode="widthFix"></image> -->
						<lys-img-lazy :imgSrc="IMG_Api+item.map_image" imgMode="widthFix"></lys-img-lazy>
						<view class="see_content" :data-url="'/pages/case/details?id='+item.id" @click="gotopage">
							<view class="text_box">
								<view class="tag_box">
									<view class="tag" v-for="(aitem, aindex) in item.tag.split(',')">{{aitem}}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="case_name">{{item.name}}</view>
				</block>
				<block v-for="(item, index) in caseEnd" :key="'caseEnd' + index">
					<view class="case_see">
						<!-- <image @click="gotopage" :data-url="'/pages/case/details?id='+item.id"
							:src="IMG_Api+item.map_image" mode="widthFix"></image> -->
						<lys-img-lazy :imgSrc="IMG_Api+item.map_image" imgMode="widthFix" @click="gotopage" :data-url="'/pages/case/details?id='+item.id"></lys-img-lazy>
						<view class="see_content" :data-url="'/pages/case/details?id='+item.id" @click="gotopage">
							<view class="text_box">
								<view class="tag_box">
									<view class="tag" v-for="(aitem, aindex) in item.tag.split(',')">{{aitem}}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="case_name">{{item.name}}</view>
				</block>
			</view>

			<view class="chooseus_box">
				<view class="choose_video" @tap="autoPupu02">
					<video :poster="IMG_Api+text.index_cover" :controls="false" :show-center-play-btn="false"></video>
				</view>
				<view class="choose_text">
					<view class="english">
						<view class="line"></view>
						<view class="e">{{text.index_Ephrase}}</view>
					</view>
					<view class="title">{{text.index_Etitle}}</view>
					<view class="text">{{text.index_Econtent}}</view>
					<view class="nav">
						<block v-for="(item, index) in text.index_Edata" :key="index">
							<view class="menu" :class="chooseusMenu == index ? 'chooseMenuColor' : ''"
								:data-index="index" @tap="setUsMenu">{{item.title}}</view>
						</block>
					</view>
					<view class="us_list" v-if="text.index_Edata">
						<view class="us_img">
							<!-- <image :src="IMG_Api+text.index_Edata[chooseusMenu].image" mode="widthFix"></image> -->
							<lys-img-lazy :imgSrc="IMG_Api+text.index_Edata[chooseusMenu].image" imgMode="widthFix"></lys-img-lazy>
						</view>
						<view class="us_text">
							<block v-for="(item, index) in text.index_Edata[chooseusMenu].desc" :key="index">
								<view class="text02">{{item}}</view>
							</block>
						</view>
					</view>
				</view>
			</view>

			<!-- 视频弹窗 -->
			<view class="pupu_box" v-if="pupu03" @tap="autoPupu02">
				<view class="show_box02" @tap.stop="">
					<video object-fit="fill" :src="IMG_Api+text.index_video" controls></video>
				</view>
			</view>

			<view class="page_content">
				<view class="page_title">
					<view class="english">{{companyTeam.teamEnglishTitle}}</view>
					<view class="content">
						<view class="title">{{companyTeam.teamTitle}}</view>
						<view class="text">{{companyTeam.teamDesc}}</view>
					</view>
				</view>

				<view class="banner_box02">
					<swiper :autoplay="true" :interval="3000" :duration="200" indicator-dots="true"
						indicator-color="rgba(255, 255, 255, .5)" indicator-active-color="#0179F1">
						<block v-for="(item, index) in imgdata02" :key="index">
							<swiper-item style="height: 100%;">
								<view class="swiper-item" style="height: 100%;" @click="gotopage" data-url="/pages/aboutus/team">
									<image :src="IMG_Api+item.image" mode="scaleToFill"></image>						
								</view>
							</swiper-item>
						</block>
					</swiper>
				</view>

				<view class="case_title">
					<view class="title">{{text.index_Nphrase}}</view>
					<view class="text">{{text.index_Ntitle}}</view>
					<view class="menu" @click="gotopage" data-url="/pages/news/news">
						<view class="t">查看更多 </view>
						<view class="a">+</view>
					</view>
				</view>

				<view class="news_box">
					<view class="news" v-for="(item, index) in news" :key="index" @click="gotopage"
								:data-url="'/pages/news/details?id='+item.id">
						<view class="news_img">
							<image :src="IMG_Api+item.image" mode="widthFix"></image>						
							<view class="arrow iconfont">
								&#xeb08;
								<view class="r"></view>
							</view>
						</view>
						<view class="time">
							<view class="r"></view>
							<view class="t">{{item.time}}</view>
						</view>
						<view class="title">{{item.title}}</view>
						<view class="text">{{item.intro}}</view>
					</view>
				</view>

			</view>

			<view class="satisfaction_box">
				<image :src="IMG_Api+otherConfig.H5bg09" mode="widthFix"></image>
				<view class="call_box">
					<view class="title">{{formInfo.form_title}}</view>
					<view class="input_list">
						<view class="input">
							<input type="text" value="" v-model="name" :placeholder="formInfo.form_name"
								placeholder-style="color:#fff" />
							<view class="icon iconfont">&#xe652;</view>
						</view>
						<view class="input">
							<input type="text" value="" v-model="email" :placeholder="formInfo.form_email"
								placeholder-style="color:#fff" />
							<view class="icon iconfont">&#xe639;</view>
						</view>
						<view class="input">
							<input type="text" value="" v-model="phone" :placeholder="formInfo.form_phone"
								placeholder-style="color:#fff" />
							<view class="icon iconfont">&#xe61e;</view>
						</view>
					</view>
					<view class="value">
						<textarea value="" v-model="message" :placeholder="formInfo.form_content"
							placeholder-style="color:#fff" maxlength="999" />
					</view>
					<view class="menu" @tap="submitFun">
						<view class="text">{{formInfo.form_button}}</view>
						<view class="arrow iconfont">&#xeb08;</view>
					</view>
				</view>
			</view>

			<view class="footer_box">
				<view class="logo" data-url="/pages/index/index" @click="gotopage">
					<image :src="IMG_Api+commonData.logo" mode="widthFix"></image>
				</view>
				<view class="name">{{commonData.company_profile}}</view>
				<view class="phone">{{commonData.hot_lineText}}+{{commonData.contact_number}}</view>
				<view class="nav_list">
					<view class="list" data-index="0" @tap="selectMenu02">
						<view class="name">{{commonData.firm}}</view>
						<view class="arrow iconfont" v-if="me02 == false">&#xe6f3;</view>
						<view class="arrow iconfont" v-if="me02 == true">&#xf230;</view>
					</view>
					<view class="me_list" v-if="me02 == true">
						<block v-for="(item, index) in categoryBottom.bottomFirm" :key="index">
							<view class="me_t" :data-url="item.url" @click="gotopage">{{item.name}}</view>
						</block>
					</view>
					<view class="list" data-index="1" @tap="selectMenu02">
						<view class="name">{{commonData.quickLink}}</view>
						<view class="arrow iconfont" v-if="link == false">&#xe6f3;</view>
						<view class="arrow iconfont" v-if="link == true">&#xf230;</view>
					</view>
					<view class="me_list" v-if="link == true">
						<block v-for="(item, index) in categoryBottom.quickLink" :key="index">
							<view class="me_t" :data-url="item.url" @click="gotopage">{{item.name}}</view>
						</block>
					</view>
					<view class="title">{{commonData.newsletter}}</view>
					<view class="name">{{commonData.describeA}}</view>
					<view class="search_box">
						<view class="search">
							<input type="text" value="" placeholder="请输入联系电话" v-model="bottomPhone" />
						</view>
						<view class="menu iconfont" @tap="phoneSubmitFun">&#xeb08;</view>
					</view>
					<view class="friendship">
						<view class="text">{{commonData.titleWord}}</view>
						<view class="friend">
							<block v-for="(item, index) in commonData.externalLink" :key="index">
								<a class="icon iconfont" :href='item.desc' target="_blank" :class="item.icon"></a>
							</block>
						</view>
					</view>
					<view class="edition">{{commonData.copyright}} {{commonData.corporation}}
						<a style="color:#7A7A7A;" href='https://beian.miit.gov.cn/'
							target="_blank">{{'&nbsp'+commonData.beian}}</a>
					</view>
				</view>
			</view>

			



		</scroll-view>
		<view class="fenestra" v-if="scrollTop > 800">
			<view class="menu iconfont" @tap="goPageTop">&#xf230;</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop:'',
				goScrollTop:0,
				adm01: false,
				adm02: false,
				adm03: false,
				chooseusMenu: 0,
				fenestra: false,
				pupu: false,
				pupu03: false,
				me: false,
				me02: false,
				link: false,
				system: false,
				navlist: [{
						text: '首页',
						url: '/pages/index/index',
					},
					{
						text: '关于我们',

					},
					{
						text: '产品服务'
					},
					{
						text: '案例展示',
						url: '/pages/case/case',
					},
					{
						text: '新闻资讯',
						url: '/pages/news/news',
					},
					{
						text: '联系我们',
						url: '/pages/telephone/telephone',
					}

				],
				systemData: [
					// {
					// 	icon: 'icon-dianpu',
					// 	title: 'B2C电商系统',
					// 	value: [{
					// 			name: '助农电商系统',
					// 			text: '多种销售模式的电商系统',
					// 			color: true,
					// 			url: '/pages/index/system'
					// 		},
					// 		{
					// 			name: '众筹电商系统',
					// 			text: '基于购物赠送门票或积分众筹电商',
					// 			color: false,
					// 			url: '/pages/index/system'
					// 		},
					// 		{
					// 			name: '艺术教培系统',
					// 			text: '艺术教育行业',
					// 			color: false,
					// 			url: '/pages/index/system'
					// 		}
					// 	]
					// },
					{
						icon: 'icon-ERPxitong',
						title: '跨境ERP电商系统',
						value: [{
								name: '网络货运系统',
								text: '运输管理结算系统',
								color: false,
								url: '/pages/index/system'
							},
							{
								name: '抢单拍卖系统',
								text: '通过拍商品卖转售议价',
								color: false,
								url: '/pages/index/system'
							},
						]
					},
					{
						icon: 'icon-cgcrmxitong',
						title: 'CRM客户管理系统',
						value: [{
							name: '抖音订单管理系统',
							text: '通过抖店接口，订单接入系统',
							color: false,
							url: '/pages/index/system'
						}, ]
					},
					{
						icon: 'icon-yidong',
						title: '移动端管理系统',
						value: [{
								name: '垃圾分类回收系统',
								text: '互联网+环保回收+便民超市模式',
								color: false,
								url: '/pages/index/system'
							},

						]
					}
				],
				imgdata: [{
						img: '../../static/banner01.png'
					},
					{
						img: '../../static/banner01.png'
					},
					{
						img: '../../static/banner01.png'
					},

				],
				imgdata02: [],

				pupu02: false,
				ewmIndex: 0,
				IMG_Api: '',
				commonData: '',
				code: '',
				nav: [],
				selected: 0,
				systemData: [],
				categoryBottom: [],
				bottomPhone: '',
				text: '',

				otherConfig: '',
				formInfo: '',
				caseStart: '',
				caseCentre: [],
				caseSide: '',
				caseEnd: '',
				chooseusMenu: 0,
				companyTeam: '',
				news: [],
				categoryData: '',
				name: '',
				email: '',
				phone: '',
				message: '',

			}
		},
		onLoad() {
			let that = this;
			that.loadData();
		},
		onShow() {
			let that = this;
			that.system = false;
			that.me = false;
			that.pupu = false;
			if (this.systemData) {
				this.systemData.forEach(item => {
					item.value.forEach(item02 => {
						this.$set(item02, 'color', false);
					});
				});
			}

		},
		methods: {		
			autoPupu() {
				let that = this;
				that.pupu02 = !that.pupu02;
			},
			autoPupu02() {
				let that = this;
				that.pupu03 = !that.pupu03;
			},
			setEwm(e) {
				let that = this;
				let index = e.currentTarget.dataset.index;
				that.ewmIndex = index;
				that.pupu02 = !that.pupu02;
			},
			loadData() {
				let that = this;
				that.Net._get('news/index', {}, res => {
					if (res.code == 1) {
						uni.setNavigationBarTitle({
							title: res.data.common.name // 修改为你想要的标题
						});

						that.commonData = res.data.common;
						that.code = res.data.code;
						that.nav = res.data.category;
						that.selected = res.data.categoryData.check_id;
						that.categoryData = res.data.categoryData;
						that.systemData = res.data.goodsclass;
						that.categoryBottom = res.data.categoryBottom;

						that.imgdata = res.data.slideshow;
						that.otherConfig = res.data.otherConfig;
						that.formInfo = res.data.formInfo;
						that.text = res.data.text;
						that.caseStart = res.data.caseStart;
						that.caseCentre = res.data.caseCentre;
						that.caseSide = res.data.caseSide;
						that.caseEnd = res.data.caseEnd;
						that.companyTeam = res.data.companyTeam;
						that.imgdata02 = res.data.team;

						that.news = res.data.news;


						that.IMG_Api = this.Cfg.Setting.img;
					}
				});
			},
			submitFun() {
				let that = this;
				let _data = {
					name: that.name,
					email: that.email,
					phone: that.phone,
					message: that.message,
				}
				that.Net._post('news/contentSubmission', _data, res => {
					if (res.code == 1) {
						uni.showToast({
							title: res.msg,
							icon: 'success',
							duration: 2800
						})
						setTimeout(function() {
							that.name = '';
							that.email = '';
							that.phone = '';
							that.message = '';
						}, 1000)
					}
				});
			},
			phoneSubmitFun() {
				let that = this;
				let _data = {
					phone: that.bottomPhone,
					type: '1',
				}
				that.Net._post('news/contentSubmission', _data, res => {
					if (res.code == 1) {
						uni.showToast({
							title: res.msg,
							icon: 'success',
							duration: 2800
						})
						setTimeout(function() {
							that.bottomPhone = '';
						}, 1000)
					}
				});
			},
			setUsMenu(e) {
				let that = this;
				that.chooseusMenu = e.currentTarget.dataset.index;
			},
			goPageTop() {
				let that = this;				
				if(that.goScrollTop === 0.1){
					that.goScrollTop = 0.2;
				}else{
					that.goScrollTop = 0.1;
				}
			},
			setSystemValue(e) {
				let that = this;
				let index01 = e.currentTarget.dataset.index01;
				let index02 = e.currentTarget.dataset.index02;
				this.systemData.forEach(item => {
					item.value.forEach(item02 => {
						this.$set(item02, 'color', false);
					});
				});
				that.systemData[index01].value[index02].color = true;

				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});

			},
			selectMenu(e) {
				let that = this;
				let number_ = e.currentTarget.dataset.index;

				if (number_ == 1) {
					that.me = !that.me;
				}

				if (number_ == 2) {
					that.system = !that.system;
				}

				if (number_ != 1 || number_ != 2) {
					let url = e.currentTarget.dataset.url;
					uni.navigateTo({
						url: url
					});
				}


			},
			selectMenu02(e) {
				let that = this;
				let number_ = e.currentTarget.dataset.index;

				if (number_ == 0) {
					that.me02 = !that.me02;
				}

				if (number_ == 1) {
					that.link = !that.link;
				}



			},
			autoListPage() {
				let that = this;
				that.pupu = !that.pupu;
			},
			gotopage(e) {
				var that = this;
				let url = e.currentTarget.dataset.url;
				//console.log(e);
				uni.navigateTo({
					url: url
				});
			},
			backPage() {
				uni.navigateBack({});
			},
			pageScroll(e){
				let that = this;
				//console.log(e.detail.scrollTop)
				that.scrollTop = e.detail.scrollTop
				if (that.scrollTop > 500) {
					this.adm01 = true;
					/* #ifdef APP-PLUS */
					/* #endif */
				} else if (that.scrollTop < 500) {
					this.adm01 = false;
					/* #ifdef APP-PLUS */
					/* #endif */
				}
				if (that.scrollTop > 2100) {
					this.adm02 = true;
					/* #ifdef APP-PLUS */
					/* #endif */
				} else if (that.scrollTop < 2100) {
					this.adm02 = false;
					/* #ifdef APP-PLUS */
					/* #endif */
				}
				if (that.scrollTop > 3000) {
					this.adm03 = true;
					/* #ifdef APP-PLUS */
					/* #endif */
				} else if (that.scrollTop < 3000) {
					this.adm03 = false;
					/* #ifdef APP-PLUS */
					/* #endif */
				}
				if (Object.scrollTop > 800) {
					this.fenestra = true;
					/* #ifdef APP-PLUS */
					/* #endif */
				} else if (Object.scrollTop < 800) {
					this.fenestra = false;
					/* #ifdef APP-PLUS */
					/* #endif */
				}
			},
		},
		onPageScroll: function(Object) {
			//console.log(Object.scrollTop); //实时获取到滚动的值			
			
		}
	}
</script>

<style>
	.banner_box {
		width: 100%;
		height: 110vw;
	}

	.banner_box swiper {
		width: 100%;
		height: 100%;
	}

	.banner_box swiper image {
		width: 100%;
		height: 100%;
	}

	.banner_box02 {
		width: 100%;
		height: 100vw;
	}

	.banner_box02 swiper {
		width: 100%;
		height: 100%;
	}

	.banner_box02 swiper image {
		width: 100%;
		height: 100%;
	}

	.with_box {
		width: 100%;
		margin-top: 3vw;
	}

	.with_box .with_img {
		width: 100%;
		position: relative;
		overflow: hidden;
	}

	.with_box .with_img .img01 {
		width: 100%;
	}

	.with_box .with_img .img02 {
		width: 30vw;
		position: absolute;
		right: 10vw;
		bottom: 0;
		z-index: 97;
		animation: spin 16s linear infinite;
	}

	@keyframes spin {
		from {
			transform: rotate(0deg);

		}

		to {
			transform: rotate(360deg);
		}
	}

	.with_box .with_img .img03 {
		width: 40vw;
		position: absolute;
		right: -50vw;
		bottom: 0;
		z-index: 97;
		opacity: 0;

	}

	.addAnimation01 {
		animation: spin02 1s linear 1 forwards;
	}

	@keyframes spin02 {
		form {
			right: -50vw;
			opacity: 0;
		}

		to {
			right: 0vw;
			opacity: 1;
		}
	}

	.with_box .with_text {
		width: 100%;
	}

	.with_box .with_text .us_box {
		width: 100%;
		display: flex;
		margin-top: 4vw;
		margin-bottom: 3vw;
	}

	.with_box .with_text .us_box .us_img {
		flex: 1;
		margin-right: 3vw;
	}

	.with_box .with_text .us_box .us_img image {
		width: 100%;
	}

	.with_box .with_text .us_box .us {
		font-size: 3.8vw;
		font-weight: bold;
		color: #333;
		text-align: right;

	}

	.with_box .with_text .us_rule {
		width: 100%;
		font-weight: bold;
		color: #333;
		font-size: 6.5vw;

	}

	.with_box .with_text .us_rule span {
		color: #0076BB;
	}

	.with_box .with_text .us_introduce {
		margin-top: 4vw;
		font-size: 3.5vw;
		color: #7E7E7E;
		line-height: 7vw;
	}

	.with_box .with_text .type_box {
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 3vw;
	}

	.with_box .with_text .type_box .icon {
		font-size: 4vw;
		color: #0076BB;
		margin-right: 3vw;
		height: 12vw;
		width: 12vw;
		border-radius: 50%;
		box-sizing: border-box;
		border: 4px solid #0076BB;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: 0.8s;
	}
	
	.with_box .with_text .type_box .icon:hover{
		background-color: #0076BB;
		color: #fff !important;
	}

	.with_box .with_text .type_box .text_box {
		flex: 1;
	}

	.with_box .with_text .type_box .text_box .title {
		font-size: 4.5vw;
		color: #333;
		font-weight: bold;
	}

	.with_box .with_text .type_box .text_box .text {
		font-size: 3.5vw;
		color: #7E7E7E;
		margin-top: 3vw;
		line-height: 6vw;
	}

	.with_box .with_text .us_menu {
		width: 100%;
		height: 15vw;
		display: flex;
		align-items: center;
		margin-top: 4vw;
		position: relative;
	}

	.with_box .with_text .us_menu .menu {
		background-color: #0076BB;
		height: 15vw;
		padding: 0 10vw;
		border-radius: 1vw;
		display: flex;
		opacity: 0;
		align-items: center;
		position: absolute;
		left: 0;
		bottom: -15vw;
	}

	.addAnimation02 {
		animation: spin03 0.5s linear 1 forwards;
	}

	@keyframes spin03 {
		form {
			bottom: -15vw;
			opacity: 0;
		}

		to {
			bottom: 0vw;
			opacity: 1;
		}
	}



	.with_box .with_text .us_menu .menu .text {
		font-size: 4vw;
		color: #fff;
		font-weight: bold;
		margin-right: 3vw;
	}

	.with_box .with_text .us_menu .menu .arrow {
		font-size: 6vw;
		color: #fff;
	}

	.satisfaction_box {
		width: 100%;
		position: relative;
		margin-top: 4vw;
	}

	.satisfaction_box image {
		width: 100%;
	}

	.satisfaction_box .satisfaction_content {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		display: flex;
		flex-direction: row;
		justify-content: left;
		flex-wrap: wrap;
		padding: 4vw 0 0 8vw;
	}

	.satisfaction_box .satisfaction_content::after {
		flex: auto;
		content: '';
	}

	.satisfaction_box .satisfaction_content .other {
		width: 50%;
	}


	.satisfaction_box .satisfaction_content .other .num_box {
		width: 100%;
		display: flex;

	}

	.satisfaction_box .satisfaction_content .other .num_box .num {
		font-size: 14vw;
		color: #fff;
		font-weight: bold;
	}

	.satisfaction_box .satisfaction_content .other .text {
		font-size: 3.2vw;
		color: #fff;
	}

	.service_box {
		width: 100%;
		margin: 0 auto;
		margin-top: 8vw;
		display: flex;
		align-items: center;

	}

	.service_box .service_auto {
		flex: 1;
		display: flex;
		flex-direction: row;
		justify-content: left;
		flex-wrap: wrap;
	}

	.service_box .service_auto::after {
		flex: auto;
		content: '';
	}

	.service_box .service_auto .service {
		width: 50%;
		margin-bottom: 8%;
	}

	.service_box .service_auto .service:nth-child(2n + 1) {
		border-right: 1px solid #F2F2F2;
	}

	.service_box .service_auto .service .icon {
		width: 20vw;
		height: 17vw;
		margin: 0 auto;
		position: relative;
	}

	.service_box .service_auto .service .icon image {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: -20vw;
		opacity: 0;
	}

	.addAnimation03 {
		animation: spin04 1s linear 1 forwards;
	}

	@keyframes spin04 {
		form {
			top: -20vw;
			opacity: 0;
		}

		to {
			top: 0vw;
			opacity: 1;
		}
	}

	.service_box .service_auto .service .title {
		font-size: 4vw;
		color: #333;
		font-weight: bold;
		margin-top: 2vw;
		text-align: center;
	}

	.service_box .service_auto .service .text {
		font-size: 3.2vw;
		color: #333;
		margin-top: 3vw;
		text-align: center;
		line-height: 6vw;
		padding: 0 1vw;
	}

	.service_box .service_auto .service .line {
		width: 10vw;
		background-color: #0076BB;
		height: 2px;
		margin: 3vw auto;
	}

	.case_title {
		width: 100%;
		margin: 0 auto;
		display: flex;
		align-items: flex-end;
		margin-top: 4vw;
	}

	.case_title .title {
		font-size: 6vw;
		color: #333;
		margin-right: 2vw;
		font-weight: bold;
	}

	.case_title .text {
		flex: 1;
		font-size: 3.5vw;
		color: #333;
		font-weight: bold;
		margin-bottom: 0.7vw;
	}

	.case_title .menu {
		display: flex;
		align-items: center;
		border: 1px solid #D2D2D2;
		height: 9vw;
		padding: 0 5vw;
	}

	.case_title .menu .t {
		font-size: 3vw;
		color: #333;
		margin-right: 1vw;
	}

	.case_title .menu .a {
		font-size: 4vw;
		color: #0179F1;
	}

	.case_see {
		width: 100%;
		margin-top: 4vw;
		position: relative;
	}

	.case_see image {
		width: 100%;
		transform: .5;
		transition: 1s;
	}

	.case_see .see_content {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		background: linear-gradient(to bottom, rgba(255, 255, 255, .1), rgba(0, 0, 0, 1));
	}

	.case_see:hover .see_content {
		display: block;
	}


	.case_see .see_content .see {
		width: 15vw;
		height: 15vw;
		background-color: #0076BB;
		border-radius: 50%;
		color: #fff;
		font-size: 4vw;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		left: calc(50% - 7.5vw);
		top: calc(50% - 7.5vw);
	}

	.case_see .see_content .text_box {
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 0;
		padding: 4vw;
	}

	.case_see .see_content .text_box .title {
		font-size: 6vw;
		color: #fff;
		font-weight: bold;
	}

	.case_see .see_content .text_box .tag_box {
		margin-top: 3vw;
		display: flex;
		align-items: center;
	}

	.case_see .see_content .text_box .tag_box .tag {
		height: 7vw;
		padding: 0 1.5vw;
		color: #fff;
		margin-right: 3vw;
		border: 1px solid #fff;
		border-radius: 1vw;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 3.5vw;
	}

	/* 
	.case_see .mask{
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		background-color: rgba(0, 0, 0, .5);
		display: none;
		transition:1s;
		
	} */

	/* .case_see:hover .mask{
		display: block;
	}
	
	.case_see:hover image{
		transform: rotate(10deg) scale(1.5);
	} */

	.case_name {
		margin-top: 4vw;
		font-size: 5vw;
		color: #333;
		font-weight: bold;
		text-align: center;
	}

	.chooseus_box {
		width: 100%;
		margin-top: 4vw;
		margin-bottom: 4vw;
		background-color: #0076BB;
	}

	.chooseus_box .choose_video {
		width: 100%;
		height: 65vw;
		padding: 4vw;
	}

	.chooseus_box .choose_video video {
		width: 100%;
		height: 100%;
	}

	.chooseus_box .choose_text {
		width: 100%;
		background-color: #0076BB;
		padding: 4vw;
	}

	.chooseus_box .choose_text .english {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.chooseus_box .choose_text .english .line {
		width: 8vw;
		height: 2px;
		background-color: #fff;
		margin-right: 3vw;
	}

	.chooseus_box .choose_text .english .e {
		color: #fff;
		font-weight: bold;
		font-size: 3.5vw
	}

	.chooseus_box .choose_text .title {
		color: #fff;
		font-weight: bold;
		font-size: 5vw;
		margin-top: 2vw;
	}

	.chooseus_box .choose_text .text {
		color: #fff;
		font-size: 3.5vw;
		margin-top: 3vw;
		line-height: 6vw;
	}

	.chooseus_box .choose_text .nav {
		width: 100%;
		margin-top: 3vw;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #fff;
	}

	.chooseus_box .choose_text .nav .menu {
		font-size: 3.5vw;
		color: #fff;
		height: 10vw;
	}

	.chooseus_box .choose_text .chooseMenuColor {
		border-bottom: 2px solid #fff;
	}

	.chooseus_box .choose_text .us_list {
		width: 100%;
		display: flex;
		margin-top: 3vw;
	}

	.chooseus_box .choose_text .us_list .us_img {
		width: 32vw;
		height: 32vw;
		margin-right: 3vw;
	}

	.chooseus_box .choose_text .us_list .us_text {
		flex: 1;
	}

	.chooseus_box .choose_text .us_list .us_text .text02 {
		font-size: 3.5vw;
		color: #fff;
		line-height: 6vw;
	}

	.news_box {
		width: 100%;
		margin: 0 auto;
		margin-top: 2vw;
	}

	.news_box .news {
		width: 100%;
		margin-bottom: 4vw;
	}

	.news_box .news .news_img {
		width: 100%;
		position: relative;
	}

	.news_box .news .news_img image {
		width: 100%;
	}

	.news_box .news .news_img .arrow {
		width: 15vw;
		height: 15vw;
		background-color: #fff;
		border-radius: 50%;
		position: absolute;
		right: 8vw;
		bottom: -7.5vw;
		font-size: 4.5vw;
		color: #333;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0px 4px 4.65px 0.35px rgba(51, 51, 51, 0.09);
	}

	.news_box .news .news_img .arrow .r {
		width: 15vw;
		height: 15vw;
		background-color: #fff;
		border-radius: 50%;
		position: absolute;
		right: 0;
		bottom: 0;
		font-size: 4.5vw;
		color: #333;
		display: flex;
		align-items: center;
		justify-content: center;
		animation: scale 1.5s infinite cubic-bezier(0, 0, 0.49, 1.02);
	}

	@keyframes scale {
		0% {
			transform: scale(1);
		}

		50%,
		75% {
			transform: scale(1.5);
		}

		78%,
		100% {
			opacity: 0;
		}
	}





	.news_box .news .time {
		width: 100%;
		margin-top: 3vw;
		display: flex;
		align-items: center;
	}

	.news_box .news .time .r {
		width: 2vw;
		height: 2vw;
		border-radius: 50%;
		background-color: #47494A;
		margin-right: 2vw;
	}

	.news_box .news .time .t {
		font-size: 3.2vw;
		color: #47494A;
	}

	.news_box .news .title {
		width: 100%;
		margin-top: 3vw;
		font-size: 4.5vw;
		color: #333;
		font-weight: bold;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.news_box .news .text {
		width: 100%;
		margin-top: 2vw;
		font-size: 3.5vw;
		color: #444444;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		line-height: 6vw;
	}

	.call_box {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		padding: 6vw 4vw;
	}

	.call_box .title {
		font-size: 6.4vw;
		font-weight: bold;
		color: #fff;
	}

	.call_box .input_list {
		width: 100%;
		margin-top: 3vw;

	}

	.call_box .input_list .input {
		width: 100%;
		height: 15vw;
		border-bottom: 1px solid #fff;
		display: flex;
		align-items: center;
		margin-bottom: 8vw;
	}


	.call_box .input_list .input input {
		flex: 1;
		font-size: 3.5vw;
		color: #fff;
	}

	.call_box .input_list .input .icon {
		font-size: 4vw;
		color: #fff;
	}

	.call_box .value {
		width: 100%;
		margin-top: 3vw;
		border-bottom: 1px solid #fff;
	}

	.call_box .value textarea {
		width: 100%;
		font-size: 3.5vw;
		color: #fff;
		height: 15vw;
		padding-top: 4vw;
	}

	.call_box .menu {
		width: 40vw;
		margin: 12vw auto 0;
		height: 13vw;
		background-color: #fff;
		border-radius: 1vw;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.call_box .menu .text {
		font-size: 3.5vw;
		color: #696969;
		margin-right: 3vw;
	}

	.call_box .menu .arrow {
		font-size: 5vw;
		color: #696969;
	}
</style>